<template>
  <div class="swiper-container" ref="swiperDom">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in swiperData" :key="item.id">
        <img :src="item.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";

export default {
  name: "Swiper",
  props: ["swiperData"],
  data() {
    return {
      // swiperData
    };
  },
  /* 
  问题 有bug  css效果有时候出不来
  原因 请求的数据是异步的
  然而 new Swiper 是同步的
  所有可能 开始只有一张 图片 不生效 寄了
  解决 通过 watch 监听 请求回来数据的改变 
  问题 效果还是不出来
  原因
  vue更新有三个阶段
  1 beforeUpperDate 
  2 数据和dom 同步
  3 UpperData
  Ajax请求的数据回来了，
  但是我们 通过 new Swiper 操作了dom
  没有等 数据和dom 同步
  寄了
  这时候vue提供了牛比的api $nextTick
  vm.$nextTick( [callback] )
  他可以等数据改变之后再等dom发生更新 再执行其中的回调函数
  //将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

  通过监听数据
  */
  watch: {
    /* 监听swiperData的改变，然后准备实例化Swiper */
    swiperData: {
      //立即执行 swiperData的数据不改变 下面的函数 不执行 所有样式 不出来 怎么办 立即执行呗
      immediate: true,
      handler() {
        if (!this.swiperData.length) return;
        //因为实例化Swiper是操作的最新的dom，所有要写在$nextTick的回调函数中
        //$nextTick 将回调延迟到下次Dom更新 更新循环之后执行
        this.$nextTick(() => {
          // 配置swiper
          // ref的使用 捕捉 ref= XXX  获取 this.$refs.XXX
          new Swiper(this.$refs.swiperDom, {
            // direction: "vertical", // 垂直切换选项
            direction: "horizontal", // 横向切换选项
            
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
        });
      },
    },
  },
};
</script>

<style>
</style>